<template>
    <div class="implict-login">
        <video :src="videoSrc"  class="implict-login-video" autoplay loop></video>
        <Card style="width:350px" class="implict-login-user">
          <p slot="title">
              <Icon type="ios-film-outline"></Icon>
              用户登陆
          </p>
          <Form ref="formInline" :model="formInline" :rules="ruleInline" >
            <FormItem prop="user">
                <Input type="text" v-model="formInline.user" prefix="ios-contact" placeholder="Username"/>
            </FormItem>
            <FormItem prop="password">
                <Input type="password" v-model="formInline.password" prefix='ios-lock-outline' placeholder="Password"/>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formInline')">登陆</Button>
                <Button type="primary" @click="test">测试touken权限</Button>
            </FormItem>
        </Form>
      </Card>
    </div>
</template>
<script>
// import Unit from '../../utils/util.js'
import axios from 'axios'
export default {
  data () {
    return {
      videoSrc: require('./video/video.mp4'),
      formInline: {
        user: '',
        password: ''
      },
      ruleInline: {
        user: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { type: 'string', min: 6, message: '密码最少6位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          axios.post('http://127.0.0.1:3000/api/login', this.formInline).then(res => {
            console.log(res)
            this.$Message.success('登陆成功!')
          })
        } else {
          this.$Message.error('登陆失败!')
        }
      })
    },
    test () {
      axios.get('http://127.0.0.1:3000/api/getUserAll').then(res => {
        console.log(res)
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .implict-login{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .implict-login-video{
      width: 100%;
      // height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%)
    }
    .implict-login-user{
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(-50%,50%)
    }
  }
</style>
